<template>
  <div>
    <el-card shadow="never" class="nopaddingcard">
      <div class="activity-title">{{defaultValue(data.title, '暂无信息')}}</div>
      <div class="activity-describe">
        <p class="p">
          <b>带动销售</b>
        </p>
        <p class="p">
          <span class="pspan">￥{{defaultValue(data.totalSaleAmount, '暂无信息')}}</span>
        </p>
        <p class="p">
          <b>发放规则：{{defaultValue(data.describe, '暂无信息')}}</b>
        </p>
        <p class="p">
          <b>活动类型：{{defaultValue(data.activityType, '暂无信息')}}</b>
        </p>
        <p class="p">
          <b>有效时间：{{defaultValue(data.activeTime, '暂无信息')}}</b>
        </p>
      </div>
      <div class="activity-detail">
        <el-row>
          <el-col :span="12" class="col1">
            <card-item title="开始时间">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.startTime, '暂无信息')}}</div>
            </card-item>
          </el-col>
          <el-col :span="12" class="col2">
            <card-item title="结束时间">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.endTime, '暂无信息')}}</div>
            </card-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col1 col11">
            <card-item title="发行量">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.couponNumber, '暂无信息')}}</div>
            </card-item>
          </el-col>
          <el-col :span="12" class="col2 col22">
            <card-item title="发放数量">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.receiveNumber, '暂无信息')}}</div>
            </card-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col1">
            <card-item title="到店人数">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.consumeNumber, '暂无信息')}}</div>
            </card-item>
          </el-col>
          <el-col :span="12" class="col2">
            <card-item title="平均每张拉动消费">
              <div slot="intro" class="intro" style="font-size: 22px;">{{defaultValue(data.averageConsumption, '暂无信息')}}</div>
            </card-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index.vue'
import { isNil } from "@/utils"
export default {
  name: 'mycard',
  components:{
    CountUp,
    CardItem
  },
  props:{
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed:{
    // totalSaleAmount(){
    //   return (this.data.total_sale_amount / 100).toFixed(2)
    // }
  },
  methods: {
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
.nopaddingcard{
  font-family: Arial;
  background: #64d9d6;
  color: #fff;
  font-size: 16px;
  /deep/.el-card__body {
    padding: 0;
  }
  .activity-title{
    padding: 30px 0 0;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
  }
  .activity-describe{
    padding: 0 15px;
    .p{
      margin: 8px 0;
      .pspan{
        font-size: 30px;
        color: #fbc92a;
        font-weight: 500;
      }
      b{
        font-size: 14px;
      }
    }
  }
  .activity-detail{
    background: #fff;
    color: #303133;
    padding: 5px 0;
    .col1{
      padding: 10px 15px;
    }
    .col11{
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
    .col2{
      border-left: 1px solid #eee;
      padding: 10px 15px;
    }
    .col22{
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
